<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

		body {
			font-family: 'microsoft yahei';
		}

		.wp {
			width: 600px;
			margin: 50px auto;
		}

		.wp > p {
			margin: 30px 0;
		}

		.wp > p > span {
			border: 1px solid #999;
			padding: 8px;
			font-size: 14px;
			color: #666;
			cursor: pointer;
		}

		.wp > p > span.on {
			border: 2px solid #f60;
			padding: 7px;
			background-image: url(img/on.png);
			background-repeat: no-repeat;
			background-position: right bottom;
		}
	</style>
</head>
<body>

	<div class="wp">
		<p>
			<label>型号</label>
			<span data-type="1" class="on">4.7英寸</span>
			<span data-type="2">5.5英寸</span>
		</p>
		<p>
			<label>颜色</label>
			<span class="on">银色</span>
			<span>金色</span>
			<span>深空灰色</span>
		</p>
		<p>
			<label>内存</label>
			<span data-mem="3" class="on">16GB</span>
			<span data-mem="4">64GB</span>
			<span data-mem="5">128GB</span>
		</p>
		<p>
			<label>版本</label>
			<span class="on">公开版</span>
			<span>移动赠费版</span>
			<span>联通合约版</span>
		</p>
		<hr>
		<div>
			<span>价格</span>
			<span id="pSpan">&yen; 10.00</span>
		</div>
	</div>

	<script src="../lib/jquery-1.12.1.min.js"></script>
	<script>

		var $wp = $('.wp');

		var price = {
			3: 10,
			4: 20,
			5: 30,
			6: 40,
			8: 50,
			10: 60
		};

		$wp.find('p > span').on('click', function() {

			var $this = $(this);

			$this.addClass('on').siblings('span.on').removeClass('on');

			type = $wp.find('span.on[data-type]').attr('data-type');
			mem = $wp.find('span.on[data-mem]').attr('data-mem');

			$('#pSpan').html('&yen; ' + price[type * mem] + '.00');

		});
	</script>
</body>
</html>